<template>
    <div class="model-warp item-warp">
        <div class="item-title">
            <h2>产品模型统计</h2>
            <a class="btn">
                <img src="../../assets/img/icon/icon_fabric.png">
            </a>
        </div>
        <div class="model-cont">
            <!--<bar-ho-ri :data="prodModel" maxValue="15000" ></bar-ho-ri>-->
            <p class="cont-tit">
                <span>产品模型接入设备数量排名</span>
                <span>产品共计：{{modeTotal}}</span>
            </p>
            <vue-seamless-scroll  v-if="prodModeData.length>0" class="seamless-warp" :data="prodModeData" :class-option="classOption">
                <ul>
                    <li v-for="(item,index) in prodModeData" :key="index">
                        <p>
                          {{item.productNumber}}
                          <span class="model-count"></span>
                          {{item.productName}}
                        </p>
                        <span>{{item.num}}</span>
                    </li>
                </ul>
            </vue-seamless-scroll>
        </div>
    </div>
</template>

<script>
    // import BarHoRi from "../Echarts/EchartsBarhori/index";
    // import {
    //     getProductData,
    // } from "@/api/apiList";

    export default {
        name: "modelCount",
        // components: {BarHoRi},
        props: ['prodModeData','modeTotal'],
        data: () => ({
            animate: false,
        }),
        methods: {},
        computed: {
            classOption() {
                return {
                    step: 0.2, // 数值越大速度滚动越快
                    limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
                    hoverStop: true, // 是否开启鼠标悬停stop
                    direction: 1, // 0向下 1向上 2向左 3向右
                    openWatch: true, // 开启数据实时监控刷新dom
                    singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                    waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
                }
            }
        },
    }
</script>

<style scoped type="text/less" lang="less">
    .seamless-warp {
        height: 16vh;
        overflow: hidden;
    }

    .model-warp {
        margin-right: 14px;
        width: 51%;
        height: 27vh;
        background-image: url("../../assets/img/bg/bg_k02.png");
        background-size: 100% 100%;
        .model-cont {
            margin-top: 10px;
            width: 100%;
            height: 20.4vh;
            overflow: hidden;
            .cont-tit {
                margin-bottom: 15px;
                display: flex;
                opacity: 0.7;
                span {
                    color: #4EB2F2;
                    &:last-child {
                        margin-left: auto;
                    }
                }
            }
            ul li {
                line-height: 36px;
                display: flex;
                p {
                    margin-right: 15px;
                    white-space: nowrap;
                    flex: 1;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    color: #4EB2F2;
                  .model-count {
                    diaplay: inline-block;
                    margin-left: 8px;
                  }
                }
                span {
                    width: 60px;
                    margin-left: auto;
                    text-align: right;
                    color: #4EB2F2;
                }
            }
        }
    }
</style>
